<!doctype html>
<html lang="en">
<head>
    <% include head.ejs %>
    <meta charset="UTF-8">
    <title>技术应用</title>
</head>
<style>
    body {
        padding-top: 0px;
        min-height: 1000px;
        position: relative;
        line-height: 160%;
        font-size: 14px;
        font-family: 'Helvetica Neue', STHeiti, 'Microsoft YaHei', Helvetica, Arial, sans-serif;
        background-image: url(/images/about_pattern.png);
        background-repeat: repeat;
    }
</style>
<body>
<%include second_nav.ejs%>
<header class="jumbotron site-header-2">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>北斗技术应用</h2>
                <p>专业、高效</p>

                <form role="search">
                    <div id="form-group" class="form-group">
                        <input id="input-search" name="keyword" type="text" class="search form-control" placeholder="搜索技术应用"/>
                        <i class="fa fa-search"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
</header>
<div class="well well-lg text-center">
    <ul id="services-tabs" class="list-inline services-tabs">
        <li><a href="javascript:void(0);">智能监控</a></li>
        <li><a href="javascript:void(0);">智能交通</a></li>
        <li><a href="javascript:void(0);">测绘地理</a></li>
        <li><a href="javascript:void(0);">精准农业</a></li>
        <li><a href="javascript:void(0);">工程测量</a></li>
        <li><a href="javascript:void(0);">其他</a></li>
    </ul>
</div>

<div class="services-wrap">
    <div class="container">
        <div class="row">
            <div class="clearfix">
                <div class="services-col col-sm-12 col-md-12">
                    <div id="services-list" class="services-list">

                    </div>
                    <nav>
                        <ul id="pager" class="pager">
                            <li><a id="prevpage" href="javascript:void(0);">上一页</a></li>
                            <li><a id="nextpage" href="javascript:void(0);">下一页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<% include basejs.ejs %>

<script src="/js/model/Article.js"></script>
<script>
    $(function () {
        var page = {
                pageNumber: 1,
                perNumber: 10,
                keyword: '',
                category: ''
        };

        var labelStyle = {
            "工程测量": "label-danger",
            "精准农业": "label-success",
            "智能交通": "label-primary",
            "测绘地理": "label-info",
            "智能监控": "label-info",
            "其他": "label-default"
        };

        $('#prevpage, #nextpage').on('click', function () {
            var title = $(this).attr('title');
            if (title) {
                page.pageNumber = title;
                Article.list(page, getListSuccess, getListError);
            }
        });

        //点击分类时
        $('#services-tabs a').on('click', function () {
            if ($(this).parent().hasClass('active')) {
                $(this).parent().removeClass('active');
                page.category = '';
            } else {
                $(this).parent().addClass('active').siblings('li').removeClass('active');
                page.category = $(this).text();
            }
            $('#input-search').val('');
            $('#form-group i').removeClass('fa-close').addClass('fa-search');

            page.pageNumber = 1;
            page.perNumber = 10;
            page.keyword = '';
            Article.list(page, getListSuccess, getListError);
        });


        var delaySearch;
        //输入关键词时
        $('#input-search').on('input propertychange', function () {
            var keyword = $(this).val();
            if (keyword) {
                $(this).next().removeClass('fa-search').addClass('fa-close');
            } else {
                $(this).next().removeClass('fa-close').addClass('fa-search');
            }
            $('#services-tabs>li').removeClass('active');

            //延迟1秒执行搜索，有输入时重置计时
            (function (keyword) {
                clearTimeout(delaySearch);
                delaySearch = setTimeout(function () {

                    page.pageNumber = 1;
                    page.perNumber = 10;
                    page.keyword = keyword;
                    page.category = '';
                    Article.list(page, getListSuccess, getListError);
                }, 1000);
            })(keyword);
        });

        //点击x图标时
        $('#form-group').on('click', '.fa-close', function () {
            $('#input-search').val('').trigger('propertychange');
        });

        Article.list(page, getListSuccess, getListError);

        function getListSuccess(returnpage) {

            var list = returnpage.list;

            page.pageNumber = returnpage.pageNumber;

            //修改上下页样式
            if (returnpage.prevpage) {
                $('#prevpage').attr('title', returnpage.prevpage);
                $('#prevpage').parent().removeClass('disabled');
            } else {
                $('#prevpage').parent().addClass('disabled');
            }

            if (returnpage.nextpage) {
                $('#nextpage').attr('title', returnpage.nextpage);
                $('#nextpage').parent().removeClass('disabled');
            } else {
                $('#nextpage').parent().addClass('disabled');
            }

            var itemHtml = '';
            if (list.length) {
                list.forEach(function (article) {

                    itemHtml += '<div class="services-item">'
                            + '<h4>'
                            + '<a target="_blank" href="/articles/content/'+ article._id +'">'+ article.title +'</a>'
                            + '</h4>'
                            + '<p>'
                            + '<span class="label '+ labelStyle[article.category] +'">'+ article.category +'</span>'
                            + '<span>'+ article.abstract +'</span>'
                            + '<span class="badge pull-right">'+ article.insertTime +'</span>'
                            + '</p>'
                            + '</div>';
                });
            }
            $('#services-list').html(itemHtml);
            return;

        }

        function getListError() {
            return;
        }
    });
</script>
</body>
</html>
